<template>
	<div>
	<dv-decoration-11 style="height:50px; width:40%; margin:0 auto;">视力检测数据</dv-decoration-11>
	<dv-border-box-8 style="width:100%;height:100%;">
		<el-row type="flex" class="row-bg" style="margin: 10px; height: 270px;">
			<el-col :span="6" class="messgebox">
				<p class="messge1">视力正常<br>
					<span>{{ goodResultNum }}</span> 人</p>
			</el-col>
			<el-col :span="18" style="margin: 10px 0;padding:10px 0;">
				<dv-scroll-board :config="data1Dam" style="color:#01c4f7;text-align: center;" />
				</dv-scroll-board>
			</el-col>
		</el-row>
	</dv-border-box-8>
	<dv-border-box-8 style="width:100%;height:100%;">
		<el-row type="flex" class="row-bg" style="margin: 10px;height: 310px;">
			<el-col :span="6" class="messgebox">
				<p class="messge1">视力不良<br>
					<span>{{ badResultNum }}</span> 人</p>
			</el-col>
			<el-col :span="18" style="margin: 10px 0;padding:20px 0;">
				<dv-scroll-board :config="data2Dam" style="color:#01c4f7;text-align: center;" />
				</dv-scroll-board>
			</el-col>
		</el-row>
	</dv-border-box-8>
	</div>
</template>
<script>
export default {
	name: 'Left',
	components: {

	},
	props: {
		rows: {
			default: {}
		}
	},
	data(){
		return {
			data1Dam: {},
			data2Dam: {},
			dataheader: ["班级","姓名","左眼", "右眼"],
			data1: [
      ],
      goodResultNum: 0,
      badResultNum: 0
		}
	},
	mounted(){
		this.$watch('rows', () => {
			this.goodResultNum = this.rows.goodResultNum
			this.badResultNum = this.rows.badResultNum
      this.data1Dam = {
	      data: this.resetData(this.rows.goodResult), // 表数据
	      header: this.dataheader, // 表头数据
	      rowNum: 7, // 表行数
	      headerBGC: '#021950', // 表头背景色
	      oddRowBGC: '#0b1547', // 奇数行背景色
	      evenRowBGC: '#000a3b', // 偶数行背景色
	      waitTime: 2000, // 轮播时间间隔(ms)
	      align: 'center'
	    };
	    this.data2Dam = {
	      data: this.resetData(this.rows.badResult), // 表数据
	      header: this.dataheader, // 表头数据
	      rowNum: 7, // 表行数
	      headerBGC: '#021950', // 表头背景色
	      oddRowBGC: '#0b1547', // 奇数行背景色
	      evenRowBGC: '#000a3b', // 偶数行背景色
	      waitTime: 2000, // 轮播时间间隔(ms)
	      align: 'center'
	    }
    })
	},
	methods: {
		resetData(list){
			var data = []
			for (var i in list) {
				data.push([list[i]['department'], list[i]['name'], list[i]['left'], list[i]['right']])
			}
			return data
		}
	}
}
</script>
<style lang="less" scope>
.messgebox{ position: relative;}
.messge1{
  font-size:15px;
  color:white;
  margin:0 auto;
  margin-top:70%;
  text-align: center;
}
.messge1 span{
  font-size:30px;
  color:#fd9002;
  font-weight: bold;
}
</style>